<template>
  <div class="WaterList_swiper">
    <div class="WaterList_msg">
      <p class="WaterList_msg1">流水列表</p>
      <el-table
        ref="multipleTable"
        :data="arr"
        tooltip-effect="dark"
        class="WaterList_list"
        max-height="570px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column prop="order_reference" label="订单编号" width="60"></el-table-column>
        <el-table-column prop="orders" label="订单分类" width="50"></el-table-column>
        <el-table-column prop="caption" label="标题" width="60">
          <template slot-scope="scope">{{typeCaption[scope.row.caption]}}</template>
        </el-table-column>
        <el-table-column prop="order_amount" label="订单金额" width="30"></el-table-column>
        <el-table-column prop="order_status" label="订单状态" width="30">
          <template slot-scope="scope">{{typeStatus[scope.row.order_status]}}</template>
        </el-table-column>
        <el-table-column prop="order_time" label="下单时间" width="80"></el-table-column>
      </el-table>
      <div class="WaterList_operation">
        <input type="checkbox" @click="abc" class="checkbox check" />
        <p class="checkbox_msg" @click="abc">全选</p>
        <span class="WaterList_operation_msg" @click="WaterListBatchDelate">批量删除</span>
      </div>
    </div>
  </div>
</template>

<script>
import { batchDelate } from "../../../api/finance";
import { getFinance } from "../../../api/finance";
export default {
  props: ["arr"],
  data() {
    return {
      typeCaption: {
        0: "幼儿英语入门课程",
        1: "小学奥数大师课程",
        2: "小学英语基础课程",
        3: "启蒙画画课程"
      },
      typeStatus: {
        0: "已支付",
        1: "未支付"
      },
      multipleSelection: []
      // tableData: [
      //   {
      //     order_reference: "2019030102369669",
      //     orders: "课程订单",
      //     caption: 2,
      //     order_amount: "￥2345.00",
      //     order_status: 0,
      //     order_time: "2021-01-29 10:55"
      //   }
      // ]
    };
  },
  watch: {
    multipleSelection(newVal, oldVal) {
      let a = 0;
      this.arr.forEach(item => {
        if (newVal.indexOf(item) == -1) {
          a++;
        }
      });
      if (!a) {
        document.querySelector(".check").checked = true;
      } else {
        document.querySelector(".check").checked = false;
      }
    }
  },
  methods: {
    WaterListBatchDelate() {
      // console.log("批量删除");
      let ids = "";
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(item => {
          ids += item.order_reference + ",";
        });
        ids = ids.slice(0, ids.length - 1);
      }
      // console.log(ids);
      batchDelate({ ids: ids })
        .then(res => {
          // console.log(res);
          if (res.code == 200) {
            this.$emit("resetParentFun");
            this.$refs.multipleTable.clearSelection();
            const params = {
              search: this.$parent.search,
              page: this.$parent.page, //页码
              pageSize: this.$parent.pageSize //每页多少条
            };
            getFinance(params)
              .then(res => {
                if (res.code == 200) {
                  this.$parent.arr = res.data;
                  this.$parent.total = res.total;
                  this.$parent.page = res.page;
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    abc() {
      if (event.target.checked) {
        this.$refs.multipleTable.toggleAllSelection();
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val);
    }
  }
};
</script>

<style lang="less" scoped>
.WaterList_swiper {
  text-align: left;
  // height: 440px;
  background: #ffffff;
  .WaterList_msg {
    // width: 100%;
    // height: 40px !important;
    .WaterList_msg1 {
      color: #333333;
      height: 40px !important;
      line-height: 40px;
      margin-left: 30px;
      font-weight: 600;
      font-family: "微软雅黑 Bold";
    }
  }
  .WaterList_list {
    // width: 100%;
    text-align: left;
    /deep/.el-table__header-wrapper {
      .el-table__header {
        width: 100% !important;
        .has-gutter {
          .el-table__cell {
            background: #eef1f5 !important;
            font-size: 16px;
            font-family: "微软雅黑 Bold";
            color: #333333;
            text-align: center;
            // padding-left: 25px;
            height: 45px;
            .el-checkbox__inner {
              display: none;
            }
          }
          color: #333333;
          font-weight: 700;
          font-size: 14px;
        }
      }
    }

    /deep/.el-table__body {
      width: 100% !important;
      .el-table-column--selection {
        padding-left: 40px;
      }
      .el-table__cell {
        text-align: center !important;
        height: 40px;
        font-size: 14px;
        font-family: "微软雅黑 ";
        color: #333333;
        padding-right: -10px;
      }
      .el-table_1_column_3 {
        // padding-left: 25px;
        // padding-right: 25px;
      }
      .el-table_1_column_5 {
        // padding-right: 35px;
      }
    }
  }
  .WaterList_operation {
    // display: flex;

    .checkbox {
      margin-top: 18px;
      margin-left: 72px;
      display: inline-block;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      width: 14px;
      height: 14px;
      background-color: #fff;
      cursor: pointer;
      transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
    }
    /deep/.checkbox_msg {
      width: 40px;
      height: 20px;
      line-height: 20px;
      display: inline-block;
      margin-top: 15px;
      margin-left: 15px;
      color: #333333;
      font-weight: 600;
      font-size: 16px;
      user-select: none;
    }
    .WaterList_operation_msg {
      margin-top: 19px;
      margin-left: 10px;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
    }
  }
  /deep/.el-table__empty-block {
    width: 100% !important  ;
  }
  /deep/.el-table_1_column_3 {
    .cell {
      padding-right: 0px;
    }
  }
}
</style>